import React, {useState} from 'react'
import {
  View,
  ViewStyle,
  TextStyle,
  StyleSheet,
  ImageStyle,
  Image,
  TouchableOpacity,
  Text,
} from 'react-native'
import {InfoLayout, SettingMoney, Division, ChangeCard, ShortBar} from 'components'
import {translateSize, themeColors, commonStyle, definedColors} from 'styles'
import InputMoney from 'components/InputMoney'
import assets from 'modules/assets'
import {navigate} from 'services/navigation'
import {PosAppFee, PosAppBank} from 'api/pos'
import {styles} from './OrderItem'
import {getAuthorization, operate} from 'services/authorization'
import {Alert} from 'react-native'

interface BookItemProps {
  key: string
  index: number
  data: PosAppFee
  bankList: PosAppBank[]
  onChange: (money: number, isCheck: boolean) => void
}

const BookItem: React.FC<BookItemProps> = props => {
  const [isCheck, setCheck] = useState(false)
  const [money, setMoney] = useState(props.data.payableAmount)
  return (
    <View
      style={{
        ...styles.itemContainer,
        paddingTop: translateSize(props.index === 0 ? 0 : 30),
        backgroundColor: '#fff',
        borderRadius: translateSize(10),
        overflow: 'hidden',
      }}
      key={props.key}>
      <View
        style={{
          width: '100%',
          backgroundColor: definedColors.white,
        }}>
        <TouchableOpacity
          style={{
            ...commonStyle.containerRow,
            alignItems: 'flex-end',
            justifyContent: 'space-between',
          }}
          onPress={() => {
            props.onChange(Number(money), !isCheck)
            setCheck(!isCheck)
          }}>
          <ShortBar style={styles.title} title={getAuthorization().project.name || ''} />
          <TouchableOpacity
            style={{...commonStyle.headerRight, paddingVertical: translateSize(0)}}
            onPress={() => {
              operate()
              navigate('HandingFee', {
                tradeInfo: {...props.data, auartName: '认筹', erpId: props.data.erpTradeId},
                bankList: props.bankList,
              })
            }}
          />
          <View style={styles.checkContainer}>
            <Image
              style={styles.check}
              source={isCheck ? assets.images.icon_check : assets.images.icon_uncheck}
            />
          </View>
        </TouchableOpacity>
      </View>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: translateSize(40),
          paddingVertical: translateSize(20),
        }}>
        <Text
          style={{
            color: '#767676',
            fontSize: translateSize(28),
          }}>
          认筹单号：
        </Text>
        <Text
          style={{
            color: '#1A1A1A',
            fontSize: translateSize(28),
          }}>
          {props.data.bookingCode}
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: translateSize(40),
          paddingVertical: translateSize(20),
        }}>
        <Text
          style={{
            color: '#767676',
            fontSize: translateSize(28),
          }}>
          应收金额：
        </Text>
        <Text
          style={{
            color: '#1A1A1A',
            fontSize: translateSize(28),
          }}>
          {props.data.receivableAmount}
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: translateSize(40),
          paddingVertical: translateSize(20),
        }}>
        <Text
          style={{
            color: '#767676',
            fontSize: translateSize(28),
          }}>
          已收金额：
        </Text>
        <Text
          style={{
            color: '#1A1A1A',
            fontSize: translateSize(28),
          }}>
          {props.data.receivedAmount}
        </Text>
      </View>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: translateSize(40),
          paddingVertical: translateSize(20),
        }}>
        <Text
          style={{
            color: '#767676',
            fontSize: translateSize(28),
          }}>
          本次收款金额：
        </Text>
        <InputMoney
          editable={true}
          upperLimit={999999999}
          defaultValue={props.data.payableAmount}
          onChange={money => {
            props.onChange(Number(money), isCheck)
            setMoney(money)
          }}
        />
        <Text
          style={{
            color: '#767676',
            fontSize: translateSize(28),
          }}>
          元
        </Text>
      </View>
      <Division />
    </View>
  )
}

export default BookItem
